<template>
  <div class="center">
      <div class="center_top">
         <div class="center_top_middle">
            <div class="center_img fl">
                <img :src="headPic" />
                <!-- <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/> -->
            </div>
            <div class="center_info fl">
                <div class="center_name">{{infor.nickname}}<span class="edit_name" @click="edit"></span></div>
                <div class="center_invite">邀请码：<span id="cp_code">{{infor.spread_code}}</span><span  class="copys" data-clipboard-target="#cp_code" @click="copy">复制</span></div>
            </div>
            <div class="center_code fl"><router-link :to="{path:'/yard',query:{id:infor.user_id}}"><img src="/static/picture/qr_code.png" /></router-link></div>
            <div class="center_relation fr"><a href="tel:0571-85319056"><img src="/static/picture/relation.png" /></a></div>
            <div class="clear"></div>
            <div class="center_aword">
                <div class="aword_wait">
                    <div class="wait_num" v-text="infor.no_settle"></div>
                    <div class="wait_exp">预估收入</div>
                </div>
               <div class="aword_add">
                    <div class="add_num" v-text="infor.total_earn"></div>
                    <div class="add_exp">累计收益</div>
                </div>               
            </div>
            <div class="center_menu">
                <div class="menu_nav">
                    <div class="menu_name">账户余额</div>
                    <div class="menu_num">
                        <span class="num"><small>¥</small> {{infor.balance}}</span> <span class="line">|</span>
                        <router-link to="/care"><span class="detail">明细</span></router-link>
                    </div>
                </div>
                <router-link to="/noalipay"><div class="menu_withdraw">提现</div></router-link>
            </div>
         </div>
      </div>
       <div class="center_content">
          <ul>
              <router-link to="order">
                <li>
                    <span class="center_content_icon icon_1"></span>
                    订单明细
                    <span class="center_icons"><span class="center_content_go"></span></span>
                    </li> 
                </router-link> 
                <router-link to="team"> 
                    <li style="position:relative;">
                        <span class="center_content_icon icon_2"></span>
                        我的粉丝<span class="teamSum">{{infor.child_sum}}人</span>
                        <span class="center_icons"><span class="center_content_go"></span></span>
                    </li> 
                </router-link>    
                <router-link to="print"> 
                    <li>
                        <span class="center_content_icon icon_3"></span>
                        我的足迹
                        <span class="center_icons"><span class="center_content_go"></span></span>
                    </li>
                </router-link>    
              <!-- <li>
                  <span class="center_content_icon icon_4"></span>
                  我的收藏
                   <span class="center_icons"><span class="center_content_go"></span></span>
              </li> -->
                <router-link :to="{path:'/invite',query:{id:infor.user_id}}"> 
                    <li>
                        <span class="center_content_icon icon_5"></span>
                        邀请好友
                            <span class="center_icons"><span class="center_content_go"></span></span>
                    </li>
                </router-link>    
                <router-link to="teamwork">               
                    <li>
                        <span class="center_content_icon icon_6"></span>
                        招商合作
                        <span class="center_icons"><span class="center_content_go"></span></span>
                    </li>
                </router-link>    
              <router-link to="set">
                    <li>                 
                        <span class="center_content_icon icon_7"></span>
                            设置
                        <span class="center_icons"><span class="center_content_go"></span></span>                 
                    </li> 
              </router-link>
          </ul>
       </div>
       <!-- <div class="center_banner">
           <img src="/static/picture/qr_code.png" />
           <div class="center_atten">扫码关注公众号</div>
       </div> -->
       <temp_footer></temp_footer>
       <div class="container"  v-if="container" @click="close"></div>
       <div class="container_info" v-if="container">
           <div class="close" @click="close"></div>
           <div class="con_edit">
               <input type="text" v-model.trim="nickname" class="edit_nick" v-on:input="canon" placeholder="请修改你的昵称" maxlength="11">
               <div class="nums">{{num}}/11</div>
           </div>
            <div class="sure" @click="sure">确认</div>
       </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';  
import  temp_footer from '../base.vue'
      export default {
        name: 'Center',
        data () {
             return {
                token:"",
                headPic:"",
                infor:"",
                num:0,
                container:false,
                nickname:"",
             }
        },
        methods:{
            copy(){
                let clipboard = new Clipboard('.copys')
                clipboard.on('success',e =>{
                    Toast('复制成功')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    Toast('复制失败')
                    clipboard.destroy()
                })
            },
            edit(){
                this.container=true;
            },
            canon(){
                console.log(this.nickname.length)
                this.num=this.nickname.length;
            },
            close(){
                this.container=false;
            },
            sure(){
                if(this.nickname==""){
                    Toast("昵称不能为空");
                    return;
                }
                var params = new URLSearchParams();
                params.append('nickname',this.nickname);       //你要传给后台的参数值 key/value
                this.$axios({
					url:'/v1/user/updateUserInfo',
                    method: 'post',
                    data:params,
					headers:{
					  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                      'Authorization':"bearer "+this.token
					}
				}).then(res => {          
                    var result=res.data;
                    if(result.code==200){
                        Toast("修改成功");
                        this.infor.nickname=this.nickname;
                        this.container=false;
                    }else{
                        Toast(result.msg)
                         this.container=false;
                    }
                }, res => {
                    console.log("error");
                });
            },
            // 打开图片上传
            // uploadHeadImg: function () {
            // this.$el.querySelector('.hiddenInput').click()
            // },
            // // 将头像显示
            // handleFile: function (e) {
            // let $target = e.target || e.srcElement
            // let file = $target.files[0]
            // console.log($target.files)
            // var reader = new FileReader()
            //     reader.onload = (data) => {
            //         let res = data.target || data.srcElement
            //         this.headPic = res.result
            //         var params = new URLSearchParams();
            //         params.append('head_pic',this.headPic);       //你要传给后台的参数值 key/value
            //         this.$axios({
            //             url:'/v1/user/updateUserInfo',
            //             method: 'post',
            //             data:params,
            //             headers:{
            //             'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
            //             'Authorization':"bearer "+this.token
            //             }
            //         }).then(res => {          
            //             var result=res.data;
            //             console.log(result);
            //             if(result.code==200){
            //                 Toast("修改成功");
            //             }else{
            //                 Toast(result.msg)
            //                 this.container=false;
            //             }
            //         }, res => {
            //             console.log("error");
            //         });
            //     }
            //     reader.readAsDataURL(file);
     
            // },        
        },
        created(){
           document.title="个人中心";
            if (localStorage.token) {
                this.token=localStorage.getItem('token');
            }else{
               this.$router.push({path:'/login'}); 
            }
            // this.$axios.post('/v1/user/getUserInfo',headers:{
            //   'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
            //   'Authorization':"bearer "+this.token
            // }).then(res => {
            //     console.log(res)
            //     var result=res.data;
            //     if(result.code==200){
            //     this.catList=result.data;
            //     }else{
            //         Toast(result.msg)
            //     }
            // }, res => {
            //     console.log("error");
            // }); 
            this.$axios({
					url:'/v1/user/getUserInfo',
					method: 'post',
					headers:{
					  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                      'Authorization':"bearer "+this.token
					}
				})
				.then(respanse=>{
                    var res=respanse.data.data;
                    if(respanse.data.code==200){
                        this.infor=res;
                        this.nickname=res.nickname;
                        this.num=this.nickname.length;
                        if(res.head_pic){
                            this.headPic=res.head_pic;
                        }else{
                            this.headPic="/static/picture/head_img.png";
                        }
                    }else if(respanse.data.code==10000){
                        this.$router.push({path:'/login'}); 
                    }
                    else{
                       Toast(respanse.data.msg);  
                    }
				})
			
 
        },
        components:{
            "temp_footer":temp_footer
        },
      }
</script>
<style scoped>
.center{background:#F8F8F8;padding-bottom:120px;width:100%;}
.center_top{width:100%;background:#F8F8F8 url(/static/images/center.png) no-repeat center center;background-size:100% 100%;padding-top:56px;height:400px;}
.center_top .center_top_middle{width:94%;margin:0 auto;}
.center_img{width:104px;height:104px;margin-right:34px;margin-top:12px;}
.center_img img{width:100%;border-radius:50%;}
.center_top .center_menu{border-radius:36px;height:140px;margin-top:60px;background:#1D1B2B url(/static/images/aword.png) no-repeat center center;background-size:100% 100%;}
.center_info{height:50px;text-align:left;color:#fff;}
.center_info .center_name{margin-top:4px;font-size:28px;line-height:40px;color:#333334;font-weight:600;}
.edit_name{width:44px;height:44px;background:url("/static/images/edit.png") no-repeat center center;background-size:100% 100%;display:inline-block;margin-left:12px;position: relative;top:10px;}
.center_info .center_invite{margin-top:18px;font-size:24px;color:#333334;}
.center_info .center_invite span.copys{color:#4A4A4A;border:2px solid #4A4A4A;padding:0 12px;border-radius:8px;margin-left:20px;}
.center_top .center_code{width:44px;height:44px;margin-left:128px;}
.center_top .center_code img{width:100%;}
.center_top .center_relation{width:44px;height:44px;}
.center_top .center_relation img{width:100%;}
.center_top .center_aword{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  margin-top:56px;
}
.center_aword .aword_wait{width:280px;text-align:center;}
.center_aword .aword_wait .wait_num{font-size:36px;font-weight:600;line-height:72px;color:#000000;}
.center_aword .aword_wait .wait_exp{font-size:28px;color:#333334;}
.center_aword .aword_add{width:260px;text-align:center;}
.center_aword .aword_add .add_num{font-size:36px;font-weight:600;line-height:72px;color:#000000;}
.center_aword .aword_add .add_exp{font-size:28px;color:#333334;}
.center_content{width:94%;margin:0 auto;background:#fff;margin-top:120px;border-radius:40px;}
.center_content li{width:92.5%;margin:0 auto;line-height:120px;font-size: 28px;color: #333334;text-align:left;border-bottom:0.6px solid #F2F2F2;/*no*/}
.center_content .center_content_icon{width:64px;height:64px;display:inline-block;position:relative;top:22px;margin-right:16px;}
.center_content .icon_1{background:url(/static/images/order.png) no-repeat center center;background-size:100% 100%;}
.center_content .icon_2{background:url(/static/images/team.png) no-repeat center center;background-size:100% 100%;}
.center_content .icon_3{background:url(/static/images/record.png) no-repeat center center;background-size:100% 100%;}
.center_content .icon_4{background:url(/static/images/collet.png) no-repeat center center;background-size:100% 100%;}
.center_content .icon_5{background:url(/static/images/invite.png) no-repeat center center;background-size:100% 100%;}
.center_content .icon_6{background:url(/static/images/join.png) no-repeat center center;background-size:100% 100%;}
.center_content .icon_7{background:url(/static/images/set.png) no-repeat center center;background-size:100% 100%;}
.center_content .center_icons{position:relative;float:right;}
.center_content .center_content_go{
    width: 20px;
    height: 20px;
    position: absolute;
    border-bottom: 1px solid #979797;
    border-right: 1px solid #979797;
    top:52px;
    left: -30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.center_content a{text-decoration: none;color: #333334;}
.center_content li:last-child{border-bottom:none;}
.center_banner{width:100%;margin-top:24px;text-align: center;background:#FFF;}
.center_banner img{width:68%;border-radius:10px;}
.center_banner .center_atten{font-size:24px;text-align: center;color:#9B9B9B;padding-bottom:20px;}
.center_menu{display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;}
.center_menu .menu_withdraw{width:150px;height:70px;line-height:70px;background:#FFE514;border-radius:70px;text-align:center;margin-top:36px;margin-right:54px;color:#4A4A4A;font-size:32px;}
.center_menu .menu_nav{color:#FFF;height:80px;margin-top:20px;margin-left:80px;}
.center_menu .menu_name{font-size:24px;}
.center_menu .menu_nav .num{font-size:32px;font-weight:600;margin-right:34px;}
.center_menu .menu_nav .num small{font-weight: normal;}
.center_menu .menu_nav .line{position: relative;top:-4px;}
.center_menu .menu_nav .detail{font-size:28px;margin-left:26px;color:#FFFFFF;}
.center_menu .menu_num{line-height:60px;}
.container{position: fixed;width:100%;height:100%;background:#000000;z-index:999999;top: 0;left: 0; right: 0;bottom: 0;opacity:0.4;}
.container_info{width:500px;height:484px;background:#FFF;position: fixed;top: 0;left: 0; right: 0;bottom: 0;margin:auto;opacity:1;z-index:1000000;padding-top:24px;border-radius:20px;}
.close{width: 40px;height:40px;background:url("/static/images/close.png") no-repeat center center;background-size:100% 100%;margin-left:10px}
.con_edit{width:412px;margin:0 auto;}
.edit_nick{width:100%;border:none;border-bottom:2px solid #D8D8D8;height:80px;font-size:28px;color:#9B9B9B;}
.nums{margin-top:16px;font-size:28px;color:#9B9B9B;margin-left:auto;width:80px;text-align: right;}
.sure{width:330px;height:92px;background:#FFE514;line-height:92px;font-size:32px;color: #333334;border-radius:46px;text-align: center;margin:0 auto;margin-top:166px;}
.hiddenInput{
  display: none;
}
.teamSum{color:#C6C6C6;font-size:32px;position: absolute;right:40px;top:4px;}
</style>
